<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1309180_m0vigzfu7y.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/admin_dashboard.css">
    <title>管理员界面</title>
    <style>
        body {
            background-image: url('https://images.squarespace-cdn.com/content/v1/5c93b2838dfc8ce49af4ae9c/1555287566122-C7XYXR01NWVW7M4FCTM9/AboutBackground-01.png');
            background-size: cover;
            background-attachment: fixed;
            color: #333;
        }
        .header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .header .button {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .review-list, .banned-users-list, .blocked-users-list {
            width: 80%;
            margin-top: 20px;
            display: none;
        }
        .list-title {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
        .list-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .list-item .details {
            flex-grow: 1;
        }
        .list-item .actions {
            display: flex;
            gap: 10px;
        }
        .actions .button {
            padding: 5px 10px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 3px;
        }
        .actions .button.delete {
            background-color: #FF0000;
        }
        .actions .button.cancel {
            background-color: #FF8C00;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .modal.active {
            display: block;
        }
        .modal .modal-content {
            margin-bottom: 20px;
        }
        .modal .button {
            width: 100%;
            padding: 10px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .modal .button.cancel {
            background-color: #FF0000;
        }
    </style>
</head>
<body>
     <!-- 导航栏 -->
<nav>
    <ul>
        <li>  
            <a href="dashboard.html">  <i class="fas fa-home"></i> 返回</a>  
        </li>   
        <!-- <li><div class="text-container">  
            <div class="big-text">HuiKing-Movie</div>  
             <div class="small-text">斯是陋室，惟吾德馨</div></div> 
        </li> -->
        <li class="search-bar">
            <input type="text" id="searchInput" placeholder="搜索...">
            <button onclick="search()" ><i class="iconfont iconchazhao"></i></button>
        </li>
        <li><a href="https://www.taobao.com" target="_blank">编者推荐</a></li>
        <li><a href="https://yiyan.baidu.com/" target="_blank">AI导航</a></li>
    </ul>
</nav>

    <div class="header">
        <button class="button" onclick="showPendingReviews()">待审核影评</button>
        <button class="button" onclick="showBannedUsers()">已禁言用户</button>
        <button class="button" onclick="showBlockedUsers()">已封禁用户</button>
    </div>
    <div class="container">
        <div class="review-list" id="reviewListContainer">
            <div class="list-title">待审核影评</div>
            <div id="reviewList"></div>
        </div>
        <div class="banned-users-list" id="bannedUsersListContainer">
            <div class="list-title">已禁言用户</div>
            <div id="bannedUsersList"></div>
        </div>
        <div class="blocked-users-list" id="blockedUsersListContainer">
            <div class="list-title">已封禁用户</div>
            <div id="blockedUsersList"></div>
        </div>
    </div>

    <!-- 审核通过弹窗 -->
    <div id="approveModal" class="modal">
        <div class="modal-content">确定要审核通过这条影评吗？</div>
        <button class="button" onclick="approveReview()">确定</button>
        <button class="button cancel" onclick="closeModal('approveModal')">取消</button>
    </div>

    <!-- 取消禁言弹窗 -->
    <div id="unbanModal" class="modal">
        <div class="modal-content">确定要取消禁言这个用户吗？</div>
        <button class="button" onclick="confirmUnban()">确定</button>
        <button class="button cancel" onclick="closeModal('unbanModal')">取消</button>
    </div>

    <!-- 取消封禁弹窗 -->
    <div id="unblockModal" class="modal">
        <div class="modal-content">确定要取消封禁这个用户吗？</div>
        <button class="button" onclick="confirmUnblock()">确定</button>
        <button class="button cancel" onclick="closeModal('unblockModal')">取消</button>
    </div>

    <script>
        const adminId = localStorage.getItem('admin_id') || 21002;  // 从localStorage获取admin_id
        const token = localStorage.getItem('access_token');  // 从localStorage获取token
        let currentReviewId;
        let unbanUserId;  // 当前取消禁言的用户ID
        let unblockUserId;  // 当前取消封禁的用户ID

        function showPendingReviews() {
            document.getElementById('reviewListContainer').style.display = 'block';
            document.getElementById('bannedUsersListContainer').style.display = 'none';
            document.getElementById('blockedUsersListContainer').style.display = 'none';
            fetchPendingReviews();
        }

        function showBannedUsers() {
            document.getElementById('reviewListContainer').style.display = 'none';
            document.getElementById('bannedUsersListContainer').style.display = 'block';
            document.getElementById('blockedUsersListContainer').style.display = 'none';
            fetchBannedUsers();
        }

        function showBlockedUsers() {
            document.getElementById('reviewListContainer').style.display = 'none';
            document.getElementById('bannedUsersListContainer').style.display = 'none';
            document.getElementById('blockedUsersListContainer').style.display = 'block';
            fetchBlockedUsers();
        }

        function fetchPendingReviews() {
            fetch('http://192.168.78.248:5000/manage_comment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`  // 添加Authorization头
                },
                body: JSON.stringify({ "user_id": adminId, "code": 0 })
            })
            .then(response => {
                console.log('Response status:', response.status);  // 添加调试信息
                return response.json();
            })
            .then(data => {
                console.log('Pending reviews data:', data);  // 添加调试信息
                if (data.statu === "successfully") {
                    const reviewList = document.getElementById('reviewList');
                    reviewList.innerHTML = '';
                    data.comments.forEach(review => {
                        const listItem = document.createElement('div');
                        listItem.className = 'list-item';
                        listItem.innerHTML = `
                            <div class="details">
                                <div>用户ID: ${review.user_id}</div>
                                <div>电影ID: ${review.film_id}</div>
                                <div>影评内容: ${review.long_comment}</div>
                                <div>评论日期: ${new Date(review.comment_date).toLocaleString()}</div>
                            </div>
                            <div class="actions">
                                <button class="button" onclick="showApproveModal(${review.film_comment_id})">审核通过</button>
                            </div>
                        `;
                        reviewList.appendChild(listItem);
                    });
                } else {
                    console.error('Failed to fetch pending reviews:', data);
                }
            })
            .catch(error => console.error('Error fetching pending reviews:', error));
        }

        function fetchBannedUsers() {
            fetch('http://192.168.78.248:5000/manage_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`  // 添加Authorization头
                },
                body: JSON.stringify({ "user_id": adminId, "code": 1 })
            })
            .then(response => {
                console.log('Response status:', response.status);  // 添加调试信息
                return response.json();
            })
            .then(data => {
                console.log('Banned users data:', data);  // 添加调试信息
                if (data.status === "successfully") {
                    const bannedUsersList = document.getElementById('bannedUsersList');
                    bannedUsersList.innerHTML = '';
                    data.users.forEach(user => {
                        if (user.ban_not && !user.block_not) {
                            const listItem = document.createElement('div');
                            listItem.className = 'list-item';
                            listItem.innerHTML = `
                                <div class="details">
                                    <div>用户ID: ${user.user_id}</div>
                                    <div>用户名: ${user.user_name}</div>
                                    <div>申诉状态: ${user.complain_not ? '已申诉' : '未申诉'}</div>
                                    ${user.complain_not ? `<div>申诉理由: ${user.complain_reason}</div>` : ''}
                                </div>
                                <div class="actions">
                                    <button class="button cancel" onclick="showUnbanModal(${user.user_id})">取消禁言</button>
                                </div>
                            `;
                            bannedUsersList.appendChild(listItem);
                        }
                    });
                } else {
                    console.error('Failed to fetch banned users:', data);
                }
            })
            .catch(error => console.error('Error fetching banned users:', error));
        }

        function fetchBlockedUsers() {
            fetch('http://192.168.78.248:5000/manage_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`  // 添加Authorization头
                },
                body: JSON.stringify({ "user_id": adminId, "code": 1 })
            })
            .then(response => {
                console.log('Response status:', response.status);  // 添加调试信息
                return response.json();
            })
            .then(data => {
                console.log('Blocked users data:', data);  // 添加调试信息
                if (data.status === "successfully") {
                    const blockedUsersList = document.getElementById('blockedUsersList');
                    blockedUsersList.innerHTML = '';
                    data.users.forEach(user => {
                        if (user.block_not) {
                            const listItem = document.createElement('div');
                            listItem.className = 'list-item';
                            listItem.innerHTML = `
                                <div class="details">
                                    <div>用户ID: ${user.user_id}</div>
                                    <div>用户名: ${user.user_name}</div>
                                    <div>申诉状态: ${user.complain_not ? '已申诉' : '未申诉'}</div>
                                    ${user.complain_not ? `<div>申诉理由: ${user.complain_reason}</div>` : ''}
                                </div>
                                <div class="actions">
                                    <button class="button cancel" onclick="showUnblockModal(${user.user_id})">取消封禁</button>
                                </div>
                            `;
                            blockedUsersList.appendChild(listItem);
                        }
                    });
                } else {
                    console.error('Failed to fetch blocked users:', data);
                }
            })
            .catch(error => console.error('Error fetching blocked users:', error));
        }

        function showApproveModal(reviewId) {
            currentReviewId = reviewId;
            document.getElementById('approveModal').classList.add('active');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
        }

        function approveReview() {
            fetch('http://192.168.78.248:5000/comment_new', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`  // 添加Authorization头
                },
                body: JSON.stringify({
                    "user_id": adminId,
                    "id": currentReviewId,
                    "comment_pass": 1,
                    "assist": 0,
                    "top": 0,
                    "code": 0
                })
            })
            .then(response => {
                console.log('Approve review response status:', response.status);  // 添加调试信息
                if (response.ok) {
                    closeModal('approveModal');
                    fetchPendingReviews();
                } else {
                    console.error('Failed to approve review');
                }
            })
            .catch(error => console.error('Error approving review:', error));
        }

        function showUnbanModal(userId) {
            unbanUserId = userId;
            document.getElementById('unbanModal').classList.add('active');
        }

        function confirmUnban() {
    fetch('http://192.168.78.248:5000/manage_user', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`  // 添加Authorization头
        },
        body: JSON.stringify({
            "user_id": adminId,
            "content": {
                "ban_not": 0,
                "ban_reason": "",
                "ban_ma_id": 0,
                "block_not": 0,
                "block_reason": "",
                "block_ma_id": 0,
                "complain_reason": "",
                "complain_not": 0
            },
            "user_be_done": unbanUserId
        })
    })
    .then(response => {
        console.log('Unban user response status:', response.status);  // 添加调试信息
        if (response.ok) {
            closeModal('unbanModal');
            fetchBannedUsers();
            location.reload();  // 刷新页面
        } else {
            console.error('Failed to unban user');
        }
    })
    .catch(error => console.error('Error unbanning user:', error));
}


        function showUnblockModal(userId) {
            unblockUserId = userId;
            document.getElementById('unblockModal').classList.add('active');
        }

        function confirmUnblock() {
            fetch('http://192.168.78.248:5000/manage_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`  // 添加Authorization头
                },
                body: JSON.stringify({
                    "user_id": adminId,
                    "content": {
                        "ban_not": 0,
                        "ban_reason": "",
                        "ban_ma_id": 0,
                        "block_not": 0,
                        "block_reason": "",
                        "block_ma_id": 0,
                        "complain_reason": "",
                        "complain_not": 0
                    },
                    "user_be_done": unblockUserId
                })
            })
            .then(response => {
                console.log('Unblock user response status:', response.status);  // 添加调试信息
                if (response.ok) {
                    closeModal('unblockModal');
                    fetchBlockedUsers();
                } else {
                    console.error('Failed to unblock user');
                }
            })
            .catch(error => console.error('Error unblocking user:', error));
        }
        function search() {
            const searchInput = document.getElementById('searchInput').value;
            const userId = localStorage.getItem('user_id') || 'guest';
            const token = localStorage.getItem('access_token');

            if (searchInput.trim() === '') {
                alert('请输入搜索内容');
                return;
            }

            const requestData = {
                user_id: parseInt(userId),
                search: searchInput
            };

            fetch('http://192.168.78.248:5000/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify(requestData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'successfully') {
                    localStorage.setItem('searchResults', JSON.stringify(data.film));
                    window.location.href = 'search.html';
                } else {
                    alert('暂无搜索结果');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>
